<template>
	<view :class="$tm.vx.state().tmVuetify.black?'black bk':''">
		<tm-menubars title="tabs选项卡切换" color="bg-gradient-primary-lighten"  :showback="true"></tm-menubars>
		<tm-tabs active-border-color="bg-gradient-primary-lighten"  :active-font-size="32" :shadow="24" @change="change" v-model="activeIndex" :list="list2" range-key="title"></tm-tabs>
		<view class="pa-32 text-size-s text-weight-b blue text my-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">左右滑动</view>
		<view class="ma-40">
			<tm-tabs color="bg-gradient-primary-lighten-b" model="fill" v-model="activeIndex1" :list="list2" active-key-value="选中我了吗" range-key="title" align="left"></tm-tabs>
		</view>
		<view class="px-32 py-12 text-size-s text-weight-b blue text my-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">右对齐</view>
		<tm-tabs :fllowTheme="false" bg-color="blue" color="yellow"  align="right" v-model="activeIndex2" :list="list" range-key="title"></tm-tabs>
		<view class="px-32 py-12 text-size-s text-weight-b blue text my-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">左对齐</view>
		<tm-tabs :fllowTheme="false" bg-color="primary" color="yellow"  align="left" v-model="activeIndex5" :list="list" range-key="title"></tm-tabs>
		<view class="px-32 py-12 text-size-s text-weight-b blue text my-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">居中对齐</view>
		<tm-tabs :fllowTheme="false" bg-color="orange" color="yellow"  v-model="activeIndex6" :list="list" range-key="title"></tm-tabs>
		<view class="px-32 py-12 text-size-s text-weight-b blue text my-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">均分</view>
		<tm-tabs :fllowTheme="false" bg-color="primary" color="yellow"  align="split"  v-model="activeIndex7" :list="list" range-key="title"></tm-tabs>
		<view class="pa-32 text-size-s text-weight-b blue text my-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">渐变</view>
		<tm-tabs :fllowTheme="false" bg-color="primary" color="yellow" v-model="activeIndex3" :list="list" range-key="title"></tm-tabs>
		<view class="pa-32 text-size-s text-weight-b blue text my-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">切换框形样式</view>
		<tm-tabs :fllowTheme="false" height="60" model="rect"  color="bg-gradient-primary-lighten" v-model="activeIndex4" :list="list" range-key="title"></tm-tabs>
		<view class="pa-32 text-size-s text-weight-b blue text my-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''"></view>
	</view>
</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmTabs from "@/tm-vuetify/components/tm-tabs/tm-tabs.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmTabs},
		data() {
			return {
				activeIndex:0,
				list:[ '母婴产品','已完成','待审核中'],
				activeIndex1:2,
				activeIndex2:0,
				activeIndex3:0,
				activeIndex4:0,
				activeIndex5:0,
				activeIndex6:0,
				activeIndex7:0,
				list2:[
					{title:'母婴产品'},
					{title:'已完成'},
					{title:'待审核中'},
					{title:'选中我了吗'},
					{title:'待审核中'},
					{title:'待审核中'},
					{title:'选中我了吗'},
					{title:'选中我了吗'},
				],
			}
		},
		mounted() {
			let t = this;
			
		},
		methods: {
			change(e){
				uni.$tm.toast(`你选中了${e}`);
			}
		}
	}
</script>

<style>

</style>
